<?php 
-------------------------------------------------------
Scalable and Modular Architecture for CSS (SMACSS) by Jonathan Snook
1.Vấn đề
- Tạo ra một style mới và ném vào cuối một tập tin CSS
=> Khó khăn cho tìm kiếm
=> Khó hiểu bất kỳ ai đang làm việc trên dự án
- Tạo file css riêng cho từng trang, các style global để trong một file css riêng
=> Như thế là chưa đủ
=> CSS cần được tổ chức hợp lý hơn
2.Giải quyết
- SMACSS là viết tắt của Scalable and Modular Architecture for CSS
- Được tạo bởi Jonathan Snook
- Phân loại style (nằm trong phần core)
The philosophy underlying SMACSS is:
Increase the semantic value of a section of HTML and content
Decrease the expectation of a specific HTML structure
SMACSS encourages
Minimizing the depth of applicability. Thoughtfully decoupling CSS from HTML.
Following consistent naming conventions
3.Phân loại style - Base
- Layout
- Module
- State
- Theme
Base - Là những thẻ mặc định của HTML
(html, body, h1, ul, a, ...)
- Thường bao gồm CSS reset
Layout - Là những id, class sử dụng để chia trang web thành những khối chính
- Chỉ những thành phần thật sự là khối chính mới đưa vào layout, các thành phần con nên đưa vào module
(#header, #article, #footer)
    Module - Là những thành phần có thể tái sử dụng
    - Không bao giờ nên sử dụng một id cho module, sử dụng class thay vì
    (.btn, .btn-primary, .btn-small)
    <a href="#" class="button btn-primary">By Now</a>
    - .btn-primary còn gọi là sub-module
    State - Định nghĩa các style mà sẽ thêm vào hoặc viết đè lên các thuộc tính có sẵn trong 1 điều kiện nhất định
    - Chúng được định nghĩa để đứng 1 mình và nên tạo bởi 1 class duy nhất, tên nên đặt với tiền tố 'is'
    (.is-hidden, is-expanded, is-active, is-inactive, .is-error)
    - State cho module nên được đặt tên bao gồm tên module
    (.is-tab-active)
    - !important là được phép kể từ khi State sẽ cần ghi đè lên các thuộc tính có sẵn
    - Thường xuyên kết hợp với Javascript
    Theme - Định nghĩa các thứ như màu sắc, kiểu chữ, ... cho các theme khác nhau
    - Không phải project nào cũng có Theme
    .pink-header {
  background-image: url("/theme/pink/header.png");
}
.pink-border {
  border: 1px solid pink;
}
-------------------------------------------------------
http://csswizardry.com/2011/08/building-better-grid-systems/
	